<div class="text-left portability-form">
  <form name="transferRequestForm" (ngSubmit)="onSubmit()">
    <div class="form-group">
      I want to move
      <div class="fancy-select">
        <select id="dataType"
                [(ngModel)]="selectedDataType"
                name="dataType"
                #dataTypeSelection="ngModel"
                (change)="onDataTypeChange()"
                title="Select what type of data to transfer"
                class="form-control">
          <option value="" disabled="true" [selected]="!selectedDataType">[select data type]
          </option>
          <option *ngFor="let item of dataTypes.dataTypes" [ngValue]="item">
            {{item}}
          </option>
        </select>
      </div>
    </div>

    <div class="form-group">
      from
      <div class="fancy-select">
        <select id="exportService"
                [(ngModel)]="selectedExportService"
                name="exportService"
                #exportServiceSelection="ngModel"
                (change)="onExportServiceChange()"
                title="Select the service to transfer data from"
                class="form-control">
          <option value="" disabled="true" [selected]="!selectedExportService">[select company]
          </option>
          <option *ngFor="let item of exportServices" [ngValue]="item">
            {{item}}
          </option>
        </select>
      </div>
    </div>

    <div *ngIf="showImport" class="form-group">
      to
      <div class="fancy-select">
        <select id="importService"
                [(ngModel)]="selectedImportService"
                name="importService"
                #importServiceSelection="ngModel"
                (change)="onImportServiceChange()"
                title="Select the service to transfer data to"
                class="form-control">
          <option value="" disabled="true" [selected]="!selectedImportService">[select company]
          </option>
          <option *ngFor="let item of importServices" [ngValue]="item">
            {{item}}
          </option>
        </select>
      </div>
    </div>

    <button type="submit"
            [disabled]="!enableNext"
            class="btn btn-primary"
            title="Clicking this will start the authorization flow">
      Authorize
    </button>
  </form>
</div>


<div *ngIf="error_text" class="alert alert-danger" role="alert">
  <strong>Oh snap!</strong> {{ error_text }}
</div>

<div class="portability-servicelist">
  <div>Transferring data between</div>
  <div class="portability-not-endorsed">Although in no way endorsed or sponsored by</div>
  <div class="portability-rights-reserved">and all rights reserved by their respective owners</div>
  <div class="container logo-table">
    <div class="row">
      <div class="col-md-12">
        <ul class="list-inline">
          <li>
            <div class="logo-google logo col" title="Google"></div>
          </li>
          <li>
            <div class="logo-microsoft logo col" title="Microsoft Office"></div>
          </li>
          <li>
            <div class="logo-instagram logo col" title="Instagram"></div>
          </li>
          <li>
            <div class="logo-flickr logo col justify-content-center" title="Flickr"></div>
          </li>
          <li>
            <div class="logo-smugmug logo col justify-content-center" title="Smugmug"></div>
          </li>
          <li>
            <div class="logo-rtm logo col justify-content-center" title="Remember The Milk"></div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</div>
